<template>
  <div style="position: relative">
    <Headers />
    <div class="content">
      <div class="left">
        <LeftDown class="left_down" />
        <LeftUp @changeIndex="changeIndex" class="left_up" />

      </div>
      <Center class="center" @changeYears="changeYears" />
      <!-- <div :id="id" class="container-map"></div> -->
      <ZheRongmap class="container-map" @complete="complete"></ZheRongmap>
      <div class="right">
        <RightUp :year="year" class="right_up" />
        <RightCenter class="right_center" />
        <RightDown class="right_down" />
      </div>
    </div>
    <img src="../../assets/bg2.png" class="bgimg" />
  </div>
</template>

<script setup>
import Headers from "../../components/Header.vue";

import LeftUp from "./component/LeftUp.vue";
import LeftDown from "./component/LeftDown.vue";
import RightUp from "./component/RightUp.vue";
import RightCenter from "./component/RightCenter.vue";
import RightDown from "./component/RightDown.vue";
import Center from "./component/Center.vue";

import http from "@/api/http";
import { env } from "@/utils/env";

import { ref, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import dot from "@/assets/map/dot.png";
import head from "@/assets/map/head.png";
import start from "@/assets/map/start.png";
import end from "@/assets/map/end.png";
import { getBaseList } from "@/api/baseApi";
import { useRoute, useRouter } from "vue-router";
import { useBaseStore } from "@/stores/base";
import { message } from "ant-design-vue";
import location from '@/assets/map/location.png'
import trackDot from '@/assets/map/track-dot.png'
import markerBlue from '@/assets/map/marker-blue.png'
import markerGreen from '@/assets/map/marker-green.png'
import markerRed from '@/assets/map/marker-red.png'
const router = useRouter();
const route = useRoute()
const baseStore = useBaseStore()

const id = ref("container" + Math.random());
let map = null;
const typeIndex = ref(0)

const complete = async (e) => {
  map = e
  
  await setBase()
  setPark()
  setTown()
  changeIndex(typeIndex.value)
}
/**一强镇 */
const setTown = () => {
  let icon = new AMap.Icon({
      size: new AMap.Size(25, 34), // 图标尺寸
      image: markerRed,
      imageSize: new AMap.Size(25, 34),
    });
  let marker = new AMap.Marker({
      icon: icon,
      position: [119.891489, 27.226507],
      anchor: 'bottom-center',
      extData: {type: 0},
      map
    });

    new AMap.Text({
      text: '城郊乡',
      anchor: 'center', // 设置文本标记锚点
      angle: 0,
      offset: new AMap.Pixel(0, -60),
      style: {
        'text-align': 'center', background: '#ed3b3b99', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'

      },
      position: [119.891489, 27.226507],
      zIndex: 100,
      extData: {type: 0},
      map
    });
}
/**两园 */
const setPark = () => {
 
  let list = [
    {lng: 119.896809, lat: 27.215842, name: '生物医药循环经济产业园'}, 
    {lng: 119.869143, lat: 27.22544, name: '太子参产业园'}, 
  ]

  for(let item of list){
    let icon = new AMap.Icon({
      size: new AMap.Size(25, 34), // 图标尺寸
      image: markerBlue,
      imageSize: new AMap.Size(25, 34),
    });

    let marker = new AMap.Marker({
      icon: icon,
      position: [item.lng, item.lat],
      anchor: 'bottom-center',
      extData: {type: 1},
      map
    });

    new AMap.Text({
      text: item.name ,
      anchor: 'center', // 设置文本标记锚点
      angle: 0,
      offset: new AMap.Pixel(0, -60),
      style: {
        'text-align': 'center', background: '#58aaf9ee', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'

      },
      position: [item.lng, item.lat],
      zIndex: 100,
      extData: {type: 1},
      map
    });
  }
}
/**三基地 */
const setBase = async () => {
  let res = await getBaseList()
  for (let item of res.data) {
    let icon = new AMap.Icon({
      size: new AMap.Size(25, 34), // 图标尺寸
      image: markerGreen,
      imageSize: new AMap.Size(25, 34),
    });

    let marker = new AMap.Marker({
      icon: icon,
      position: [item.lng, item.lat],
      anchor: 'bottom-center',
      extData: {type: 2},
      map
    });

    new AMap.Text({
      text: item.name + '（基地）',
      anchor: 'center', // 设置文本标记锚点
      angle: 0,
      offset: new AMap.Pixel(0, -60),
      style: {
        'text-align': 'center', background: '#2ebf2799', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'

      },
      position: [item.lng, item.lat],
      zIndex: 100,
      extData: {type: 2},
      map
    });
  }
}
const changeIndex = (index) => {
  typeIndex.value = index
  if(!map){
    return
  }
  console.log(index)
  let list = map.getAllOverlays()
  for(let item of list){
    let extData = item.getExtData()
    if(extData.type == index){
      item.show()
    } else {
      item.hide()
    }
  }
}
</script>

<style scoped lang="scss">
.bgimg {
  // width: 100%;
  // height: 100%;
  height: vh(800);
  width: vw(1440);
  z-index: 5;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.container-map {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  box-shadow: 0 0 vw(80) vw(40) rgba(30, 73, 98, 1) inset;

  z-index: 0;
}

.bg-class {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  // box-shadow: 0 0 vw(80) vw(40) rgba(30, 73, 98, 1) inset;

  /* 设置背景图像 */
  // background-image: url('@/assets/BG.jpg'), linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.1));
  /* 确保图像和渐变都填充整个元素 */
  // background-size: cover;
  /* 调整图像和渐变的位置 */
  // background-position: center, center;
  /* 确保图像和渐变都随元素大小变化而调整 */
  // background-repeat: no-repeat;

  z-index: 1;
}

.content {
  display: flex;
  justify-content: space-between;
  position: relative;

  // /* 设置背景图像 */
  // background-image: url('@/assets/BG.jpg'), linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(0,0,0,0.5));
  // /* 确保图像和渐变都填充整个元素 */
  // background-size: cover;
  // /* 调整图像和渐变的位置 */
  // background-position: center, center;
  // /* 确保图像和渐变都随元素大小变化而调整 */
  // background-repeat: no-repeat;
}

.left {
  width: 27%;
  z-index: 10;
}

.left_up {
  /* margin: 10px;
  height: 375px; */
  margin: vh(10) vw(10);
  height: vh(350);
}

.left_down {
  margin: vh(10) vw(10);
  height: vh(350);
}

.center {
  width: 46%;
  margin: vh(10) vw(10);
  // z-index: 1;
}

.right {
  width: 27%;
  z-index: 10;
}

.right_up {
  margin: vh(10) vw(10);
  height: vh(230);
}

.right_center {
  margin: vh(10) vw(10);
  height: vh(230);
}

.right_down {
  margin: vh(10) vw(10);
  height: vh(230);
}
</style>